<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				width: 100%;
				font-size: 16px;
			}

			.box {
				position: relative;
				height: 100%;
				width: 100%;
			}

			.block {
				position: absolute;
				height: 12rem;
				width: 12rem;
				background: coral;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 2rem;
				outline: 0.125rem solid #fff;
				outline-offset: -0.3125rem;
			}

			#b {
				transform: translateY(12rem);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="block" id="a">a</div>
			<div class="block" id="b">b</div>
		</div>


		<script type="text/javascript">
			document.addEventListener('DOMContentLoaded', function() {
				document.documentElement.style.fontSize = 16 * document.documentElement.clientWidth / 375 + 'px';

				window.onresize = function() {
					document.documentElement.style.fontSize = 16 * document.documentElement.clientWidth / 375 + 'px';
				};

				var box = document.querySelector('.box');
				var oDiv = document.querySelectorAll('.block');

				oDiv.forEach(function(item) {
					let trans = getComputedStyle(item, null).transform.replace(/[^.\d,-]/g, '').split(',');
					item.x = trans[4] || 0;
					item.y = trans[5] || 0;
				});

				box.addEventListener('touchstart', function() {
					if (event.target.className == 'block') {
						let id = event.targetTouches[0].identifier;
						let disX = event.targetTouches[0].pageX - event.target.x;
						let disY = event.targetTouches[0].pageY - event.target.y;

						function move() {
							if (event.targetTouches[0].identifier == id) {
								event.target.x = event.targetTouches[0].pageX - disX;
								event.target.y = event.targetTouches[0].pageY - disY;
								event.target.style.transform = `translate(${event.target.x}px,${event.target.y}px)`;
							}
						}

						function up() {
							if (event.targetTouches[0].identifier == id) {
								event.target.removeEventListener('touchmove', move, false);
								event.target.removeEventListener('touchend', up, false);
							}
						}

						event.target.addEventListener('touchmove', move, false);
						event.target.addEventListener('touchend', up, false);
					}

					event.preventDefault();
				}, false)
			}, false);
		</script>
	</body>
</html>
